<template>
    <!--
    v-show 总是编译并渲染所有内容 - 它只是将“display: none”样式添加到元素。它的初始加载成本较高，但切换成本很低。
    相比之下,v-if 是真正的条件式:它是惰性的,因此如果其初始条件为 false,它甚至不会执行任何操作.这对于初始加载时间来说可能是件好事.
    当条件为 true 时, v-if 将编译并呈现其内容.切换 v-if 块实际上会破坏其中的所有内容.
    例如，v-if 中的组件在切换时实际上会被销毁并重新创建，因此切换巨大的 v-if 块可能比 v-show 更昂贵。
    -->
    <Person v-if="isShow" />
    <Person v-show="isShow" />
</template>

<!-- vue3 的写法, 不带便利插件 -->
<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script lang="ts" setup>
import Person from './components/Person.vue'
import { ref } from 'vue'
let isShow = ref(true)
</script>
<style scoped></style>